<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-box flex-col">
        <div class="mt-tab-inner relative flex1">
            <div class="ui-mode-box body" ref="scroll">
                <div class="relative" v-if="list&&list.length">
                    <div class="coupon-wrap">
                        <div class="coupon-item"
                            :key="`coupon-${i}`"
                            v-for="(item,i) in list">
                            <div class="coupon-info flex-row align-center-row">
                                <div class="coupon-price flex-col align-center-row">
                                    <div class="coupon-minus"><span>¥</span>{{item.value_4_use_rule}}</div>
                                    <div>满{{item.key_4_use_rule}}元可用</div>
                                </div>
                                <div class="coupon-content flex-row align-center-row align-between-row">
                                    <div class="coupon-rules">
                                        <div class="coupon-name">
                                            <p>满{{item.key_4_use_rule}}元减{{item.value_4_use_rule}}元</p>
                                            <p>仅可购买店铺内部分产品</p>
                                        </div>
                                        <div class="coupon-time">{{item.time_begin.replace(/-/g,".").split(' ')[0]}} 至 {{item.time_end.replace(/-/g,".").split(' ')[0]}} 可用</div>
                                    </div>
                                    <template v-if="$route.query.is_online==0">
                                        <template v-if="$route.query.orderId">
                                            <i class="check-icon" :class="item.checked?'checked':''" @touchstart.stop @click="changeCouponCheck(i)"></i>
                                        </template>
                                        <template v-else>
                                            <div v-if="item.isGet" class="coupon-get disabled">已领</div>
                                        </template>
                                    </template>
                                    <div v-if="$route.query.is_online==1" class="coupon-label used"></div>
                                    <div v-if="$route.query.is_online==2" class="coupon-label expire"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="isScrolling" class="flex1 flex-row align-center scrolling-content relative">
                        <span class="icon">
                            <bsx-loading master-background="rgba(0,0,0,0)" box-background="rgba(0,0,0,0)" :size="35" :show-text="false"></bsx-loading>
                        </span>
                        <span class="text">努力加载中...</span>
                    </div>
                    <div v-else-if="isLoadEnded" class="flex1 flex-row align-center scrolling-content relative">已经到底啦~~</div>
                </div>
            </div>
        </div>
        <div class="relative" v-if="pageStatus&&$route.query.orderId&&$route.query.is_online==0">
            <div class="buttom">
                <div class="address-sure" @touchstart.stop @click="submit">确认</div>
            </div>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import mixinList from '@/views/content/mixins/list';
export default {
    name:'my/coupon/couponList',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            selected_index:'',
            currentIsOnline:'',
            currentPage:0,
            pageSize:10,
            isLoadEnded:false,
            list:[],
        };
    },
    props:{
        is_online:''
    },
    mixins:[
        mixinCommon,
        mixinRequest,
        mixinList
    ],
    computed:{
    },
    watch:{
        is_online:{
            handler(val){
                if((val||val==0)&&val.toString()!=this.currentIsOnline){
                    this.currentIsOnline=val;
                    this.$nextTick(this.refresh());
                };
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.getListInfo({
                flag:true,
                page:0
            });
        },
        // 获取列表数据
		getListInfo({flag,page,callback}){
            this.getShopInfo().then(()=>{
                this.getPageInfo({
                    name:'my.coupon',
                    param:{
                        invoke_method:'public_page_4m_score_list',
                        id_public_agent_info_list_like:this.$store.state.global.userInfo.id_public_agent_info,
                        pre_db_para_begin_idx:page*this.pageSize,
                        pre_db_para_length_4_list:this.pageSize,
                        type_4_score_display:2,
                        pre_cmd_para_load_goods:false,
                        is_online:this.$route.query.is_online,
                        buyer_id:this.public_user_info.id_public_user_info,
                        pre_db_para_order_by_para:'time_consume DESC',
                    }
                }).then(({result,response})=>{
                    if(result.page_content&&result.page_content.length){
                        if(this.$route.query.is_online==0){
                            for(var i=0; i<result.page_content.length; i++){
                                if(this.$route.query.orderId){
                                    result.page_content[i].checked=false;
                                } else {
                                    result.page_content[i].isGet=true;
                                }
                            }
                        }
                        this.list.push(...result.page_content.slice(0,this.pageSize));
                        this.currentPage=page;
                        if(result.page_content.length<this.pageSize){
                            this.isLoadEnded=true;
                        }else if((this.currentPage+1)*this.pageSize>=result.result_num){
                            this.isLoadEnded=true;
                        };
                        callback&&callback();
                    }else{
                        if(flag){
                            this.showResult('没有查询到相关数据');
                        }else{
                            this.showToast('没有查询到相关数据',false);
                        };
                        callback&&callback();
                    };
                }).catch(({msg})=>{
                    this.showMessage(msg);
                });
            }).catch(({msg})=>{
                if(!flag){
                    this.showToast(msg,false);
                };
                callback&&callback();
            });
		},
        // 获取用户信息
        getShopInfo(){
            return new Promise((resolve,reject)=>{
                let public_agent_info=this.$store.state.global.public_agent_info,
                    public_user_info=this.$store.state.global.public_user_info;
                if(public_agent_info&&public_user_info){
                    this.public_agent_info=public_agent_info;
                    this.public_user_info=public_user_info;
                    document.title=this.public_agent_info.application_name;
                    resolve({});
                }else{
                    this.$http.post({
                        name:'my',
                        data:{
                            invoke_method:'user_and_shop_info'
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result,response})=>{
                        this.public_agent_info=result.public_agent_info||{};
                        this.public_user_info=result.public_user_info||{};
                        document.title=this.public_agent_info.application_name;
                        this.setState({
                            key:'public_agent_info',
                            value:this.public_agent_info
                        });
                        this.setState({
                            key:'public_user_info',
                            value:this.public_user_info
                        });
                        resolve({result,response});
                    }).catch(({msg})=>{
                        reject({msg});
                    });
                };
            });
        },
        /*
         * 选择优惠券
         */
        changeCouponCheck(i){
            this.list[i].checked=!this.list[i].checked;
            if(this.list[i].checked){
                this.selected_index=i;
                for (let index = 0; index < this.list.length; index++) {
                    if(this.list[index].id_public_score_record!=this.list[i].id_public_score_record){
                        this.list[index].checked=false;
                    }
                }
            }else{
                this.selected_index='';
            }
        },
        /*
         * 确认
         */
        submit(){
            var ways_of_payment=this.$route.query.payway&&this.$route.query.payway.length==4?this.$route.query.payway.split(''):'2112'.split('');
            ways_of_payment[3]=2;
            this.$http.post({
                name:'common.shopping.info',
                data:{
                    invoke_method:'pre_submit_4_order',
                    pre_db_para_id_public_goods_order_record:this.$route.query.orderId,
                    ways_of_payment:ways_of_payment.join(''),
                    id_public_score_record:this.selected_index||this.selected_index==0?this.list[this.selected_index].id_public_score_record:'',
                },
                loading:{
                    enabled:true
                }
            }).then(({result,response})=>{
                this.handleHistory();
            }).catch(({msg})=>{
                this.showToast(msg,false);
            });
        },
        /*
         * 刷新
         */
        refresh(){
            this.currentPage=0;
            this.isLoadEnded=false;
            this.list=[];
            this.getListInfo({
                flag:true,
                page:0
            });
        },
        /*
         * 请求失败刷新
         */
        handleRefresh(){
            this.init();
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.relative{
    position: relative;
    width:100%;
    height:4.37rem;
}
.buttom{
    position:fixed;
    width:100%;
    height:2.67rem;
    padding:.85rem;
    .address-sure{
        width:100%;
        height:2.67rem;
        border-radius:.21rem;
        background:#2398aa ;
        text-align:center;
        line-height:2.67rem;
        font-size:.85rem;
        color:#fff;
    }
}
</style>
